<template>
  <view class="register-page animated-gradient-bg">
    <view class="status-bar"></view>
    
    <view class="register-container glass-effect multi-shadow card-3d">
      <view class="card-3d-inner">
        <view class="register-header">
          <view class="welcome-title gradient-text">欢迎加入</view>
          <view class="welcome-subtitle">创建您的账号，开始寻找真爱</view>
        </view>
        
        <view class="register-form">
          <view class="floating-label-input">
            <input class="focus-glow" type="text" id="username" placeholder=" " v-model="registerForm.username" />
            <label for="username">用户名</label>
          </view>
          
          <view class="floating-label-input">
            <input class="focus-glow" type="email" id="email" placeholder=" " v-model="registerForm.email" />
            <label for="email">电子邮箱</label>
          </view>
          
          <view class="floating-label-input">
            <input class="focus-glow" type="tel" id="phone" placeholder=" " v-model="registerForm.phone" />
            <label for="phone">手机号码</label>
          </view>
          
          <view class="floating-label-input">
            <input class="focus-glow" type="password" id="password" placeholder=" " v-model="registerForm.password" />
            <label for="password">密码</label>
          </view>
          
          <view class="floating-label-input">
            <input class="focus-glow" type="password" id="confirmPassword" placeholder=" " v-model="registerForm.confirmPassword" />
            <label for="confirmPassword">确认密码</label>
          </view>
          
          <label class="checkbox-modern">
            <input type="checkbox" v-model="agreeTerms" />
            <span class="checkbox-icon"></span>
            <span class="checkbox-text">我已阅读并同意《用户协议》和《隐私政策》</span>
          </label>
          
          <button class="register-btn btn-modern gradient-bg hover-scale" @click="register">
            注册并提交
            <text class="btn-icon">→</text>
          </button>
          
          <view class="form-divider">
            <span class="form-divider-text">或</span>
          </view>
          
          <view class="social-login">
            <view class="social-login-tip">使用社交账号登录或注册</view>
            <view class="social-login-buttons">
              <view class="social-login-btn hover-scale">
                <image src="/static/images/wechat-icon.png" mode="aspectFit" class="social-icon"></image>
              </view>
              <view class="social-login-btn hover-scale">
                <image src="/static/images/qq-icon.png" mode="aspectFit" class="social-icon"></image>
              </view>
              <view class="social-login-btn hover-scale">
                <image src="/static/images/weibo-icon.png" mode="aspectFit" class="social-icon"></image>
              </view>
            </view>
          </view>
          
          <view class="login-link">
            已有账号？<text class="gradient-text" @click="goToLogin">立即登录</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        username: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: ''
      },
      formData: null,
      agreeTerms: false
    }
  },
  onLoad() {
    // 获取之前填写的表单数据
    const formDataStr = uni.getStorageSync('registerFormData')
    if (formDataStr) {
      this.formData = JSON.parse(formDataStr)
    }
  },
  methods: {
    register() {
      // 表单验证
      if (!this.registerForm.username) {
        uni.showToast({ title: '请输入用户名', icon: 'none' })
        return
      }
      if (!this.registerForm.email) {
        uni.showToast({ title: '请输入电子邮箱', icon: 'none' })
        return
      }
      if (!this.registerForm.phone) {
        uni.showToast({ title: '请输入手机号码', icon: 'none' })
        return
      }
      if (!this.registerForm.password) {
        uni.showToast({ title: '请设置密码', icon: 'none' })
        return
      }
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
        return
      }
      if (!this.agreeTerms) {
        uni.showToast({ title: '请阅读并同意用户协议和隐私政策', icon: 'none' })
        return
      }
      
      // 合并用户信息和表单数据
      const userData = {
        ...this.registerForm,
        personalInfo: this.formData
      }
      
      // 这里可以添加注册逻辑，例如调用API
      console.log('注册数据:', userData)
      
      // 注册成功后跳转到登录页面
      uni.showToast({
        title: '注册成功',
        icon: 'success',
        duration: 2000,
        success: () => {
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }, 2000)
        }
      })
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    }
  }
}
</script>

<style lang="scss">
@import url('/static/css/modern-ui.css');

.register-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.status-bar {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.register-container {
  width: 100%;
  max-width: 650rpx;
  padding: 60rpx 40rpx;
  border-radius: 30rpx;
  margin: 80rpx auto;
}

.register-header {
  margin-bottom: 60rpx;
  text-align: center;
}

.welcome-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #909399;
}

.register-form {
  margin-bottom: 40rpx;
}

.register-btn {
  width: 100%;
  height: 90rpx;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}

.social-login {
  margin-top: 40rpx;
  text-align: center;
}

.social-login-tip {
  font-size: 24rpx;
  color: #909399;
  margin-bottom: 24rpx;
}

.social-login-buttons {
  display: flex;
  justify-content: center;
}

.social-icon {
  width: 28rpx;
  height: 28rpx;
}

.login-link {
  margin-top: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #606266;
}

.login-link .gradient-text {
  font-weight: 500;
  cursor: pointer;
}
</style>